<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax 例子</title>
<%@include file="/WEB-INF/page/commons/import.jsp" %> 
<script type="text/javascript" src="<%=path %>/resources/js/jquery.json-2.2.js"></script>
<script type="text/javascript" src="<%=path %>/resources/js/jquery-form.js"></script>
<script type="text/javascript">
var queryInfo = {
	_pageNow:1
};

/*查询*/
function search(){
	queryInfo._pageNow = 1;
	var queryCondtions = $("*[name^='query.']");
	if(queryCondtions){
		$.each(queryCondtions,function(i,condtion){
			var value = $(condtion).val();
			var key = $(condtion).attr("name");
			key = key.replace(/query\./,"");
			if(value && $.trim(value)!=''){
				queryInfo[key]=$.trim(value);
			}else{
				queryInfo[key]= undefined;
			}
		});
	}
	refresh();
}
/*刷新*/
function refresh(){
	var url = path + "/demo/ajax/demoAjaxUser_query?" + getAjaxR();
	$.ajax({
		url:url,
		type:"POST",
		data:"query=" + $.toJSON(queryInfo),
		dataType:"json",
		beforeSend:function(){
			showCustomDiv(true, "apdiv", 1, true);
		},
		success:function(returnData){
			if(returnData.status){
				loadDateToTable(returnData.msg);
			}else{
				ajaxSubmitFail(returnData.msg);				
			}
			showCustomDiv(false, "apdiv", 1, true);
		},
		error:function(){
			alert("请求失败，请联系管理员");
			showCustomDiv(false, "apdiv", 1, true);
		}
	});
}
/*换页数*/
function goPage(pn,targetBt){
	$(targetBt).attr("disabled",true);
	queryInfo._pageNow = pn;
	refresh();
	$(targetBt).attr("disabled",false);
}
/*修改*/
function toEdit(id,targetBt){
	var url = path + "/demo/ajax/demoAjaxUser_find?" + getAjaxR();
	url += "&oprBean.id="+ id;
	$.ajax({
		url:url,
		type:"GET",
		dataType:"json",
		error:function(){
			alert("请求失败，请联系管理员");
			showCustomDiv(false, "apdiv", 1, true);
		},
		beforeSend:function(){
			showCustomDiv(true, "apdiv", 1, true);
			$(targetBt).attr("disabled",true);
		},
		success:function(returnData){
			if(returnData.status){
				loadDataToEdit(returnData.msg);
			}else{
				ajaxSubmitFail(returnData.msg);			
			}
			$(targetBt).attr("disabled",false);
		}
	});
}
/*删除*/
function toDelete(id,targetBt){
	if(!confirm("确认要删除吗？")){
		return;
	}
	var url = path + "/demo/ajax/demoAjaxUser_delete?" + getAjaxR();
	url += "&oprBean.id="+ id;
	$.ajax({
		url:url,
		type:"GET",
		dataType:"json",
		error:function(){
			alert("请求失败，请联系管理员");
			showCustomDiv(false, "apdiv", 1, true);
		},
		beforeSend:function(){
			showCustomDiv(true, "apdiv", 1, true);
			$(targetBt).attr("disabled",true);
		},
		success:function(returnData){
			if(returnData.status){
				if(returnData.msg==1){
					alert("删除成功");
					refresh();
				}else{
					alert("删除失败");
				}
			}else{
				ajaxSubmitFail(returnData.msg);			
			}
			showCustomDiv(false, "apdiv", 1, true);
			$(targetBt).attr("disabled",false);
		}
	});
	
}
/*加载数据*/
function loadDateToTable(data){
	if(data){
		$("#listSourceTableDiv tr:first").nextAll().detach();
		//加载表格数据
		if(data.rows){
			var table_data = "";
			var sourceTable_th = $("#listSourceTableDiv th");
			$.each(data.rows,function(i,row){
				table_data += "<tr>";
			 
// 				$.each(sourceTable_th,function(j,th){
//					var key = $(th).attr("name");
//					var width = $(th).attr("width");
//					if($.trim(key)==''){
//						table_data +="<td>"+row.id+"&nbsp;</td>";
//					}else{
//						table_data +="<td width="+width+">"+$.trim(row[key])+"&nbsp;</td>";
//					}
//				})
				var sex = "男";
				if(row.sex==0){
					sex = "女";
				}
				table_data +="<td>"+$.trim(row.id)+"&nbsp;</td>";
				table_data +="<td>"+$.trim(row.userName)+"&nbsp;</td>";
				table_data +="<td>"+$.trim(row.realName)+"&nbsp;</td>";
				table_data +="<td>"+sex+"&nbsp;</td>";
				table_data +="<td>"+$.trim(row.birthday)+"&nbsp;</td>";
				
				var oprStr = "<input type='button' value='修改' onclick='toEdit("+row.id+")'>";
				oprStr += "<input type='button' value='删除' onclick='toDelete("+row.id+")'>";
				
				table_data +="<td>"+oprStr+"&nbsp;</td>";
				table_data += "</tr>";		
			})
			$("#listSourceTableDiv tr:first").after(table_data);
		}
		//加载分页数据
		$("#pageTagDiv").empty();
		$("#pageTagDiv").html(getPageTagHTML(data.pageNow,data.pageCount,data.total,0));
		
	}
}

function getPageTagHTML(pageNow, pageCount, total, viewPageSize){
	var result = "";
	if (viewPageSize == 0) {
		viewPageSize = DEFAULT_VIEWSIZE;
	}
	if (pageNow <= 1) {
		result+="<span >首页</span>\r\n";
		result+="<span >上一页</span>\r\n";
	} else {
		result+="<a href='javascript:void(0);' onclick='goPage(1,this)'><span >首页</span></a>\r\n";
		result+="<a href='javascript:void(0);' onclick='goPage(" + (pageNow - 1) + ",this)'><span >上一页</span></a>\r\n";
	}
	if (pageCount == 0) {
		result+="<span >1</span>\r\n";
	} else {
		var start = 1;
		if (pageCount > viewPageSize && pageNow > 1) {
			var _tmpStart = pageNow - Math.floor(viewPageSize / 2);
			var _endPage = pageNow + Math.floor(viewPageSize / 2);
			if (_tmpStart > 1 && _endPage < pageCount) {
				start = _tmpStart;
			} else if (_tmpStart > 1) {
				start = _tmpStart;
			}
		}

		if (pageCount - start < viewPageSize) {
			start = start - (viewPageSize - (pageCount - start + 1));
		}
		if (start < 0) {
			start = 1;
		}

		for (var _i = 0; _i < viewPageSize; _i++) {
			if (start > pageCount) {
				break;
			}
			if (start == pageNow) {
				result+="<span >" + start + "</span>\r\n";
			} else {
				result+="<a href='javascript:void(0);' onclick='goPage(" + (start) + ",this)'><span >"+start+"</span></a>\r\n";
			}
			start++;
		}
	}
	if (pageNow == pageCount || pageCount <= 1) {
		result+="<span >下一页</span>\r\n";
	} else {
		result+="<a href='javascript:void(0);' onclick='goPage(" + (pageNow + 1) + ",this)'><span >下一页</span></a>\r\n";
	}

	return result;

}

function saveOprBean(targetBt){
// 	$("#editForm").submit();
	var url = path + "/demo/ajax/demoAjaxUser_save?" + getAjaxR();
	$.ajax({
		url:url,
		type:"POST",
		dataType:"json",
		data:$("#editForm").serializeObjectForm("oprBean"),
		error:function(){
			alert("请求失败，请联系管理员");
			showCustomDiv(false, "apdiv", 1, true);
		},
		beforeSend:function(){
			clearError($("#editDiv"));
			showCustomDiv(false, "editDiv", 1, false);
			showCustomDiv(true, "apdiv", 1, true);
			$(targetBt).attr("disabled",true);
		},
		success:function(returnData){
			if(returnData.status){
				if(returnData.msg==1){
					alert("保存成功");
					showCustomDiv(false, "apdiv", 1, true);
					refresh();
					return;
				}else{
					$("#opr_userName").select();
					alert("保存失败");
				}
			}else{
				showError($("#editDiv"),returnData)
// 				ajaxSubmitFail(returnData.msg);			
			}
			
			showCustomDiv(false, "apdiv", 1, true);
			showCustomDiv(true, "editDiv", 1, true);
			$(targetBt).attr("disabled",false);
		}
	});
}

function loadDataToEdit(data){
	$("#editForm").resetObjectForm(data);
	showCustomDiv(false, "apdiv", 1, true);
	showCustomDiv(true, "editDiv", 1, true);
	$("#opr_userName").select();
}

/*清楚错误信息*/
function clearError(div){
	if(div){
		$("span[id$='SpanMsg']",div).each(function(i,span){
			$(span).html('');
		});
	}
}
/*显示错误信息*/
function showError(div,errorData){
	if(div && errorData){
		var errors = errorData.fieldErrors;
		if($.trim(errors)==''){
			return;
		}
		
		$.each(errors,function(key,tmpError){
			var _key = key.replace(/.*[^.]\./,"");
			
			var span = $("#" + _key + "SpanMsg");
			if(span){
				span.html($.trim(tmpError));
			}
		});
	}
}

$(function(){
	search();
})
</script>
</head>
<body>
	<h1>ajax 例子</h1>
	<div>
		<p>
			名称:<input type="text" name="query.userName" />
			生日<input type="text" name="query._birthday_condtion_GT" />
			-<input type="text" name="query._birthday_condtion_LT" />
		</p>
		<input type="button" value="添加" onclick="toEdit(-1)">
		<input type="button" value="查询" onclick="search()">
	</div>
	<div>
		<table id="listSourceTableDiv" width="700px">
			<tr>
				<th name="id" width="10%">ID</th>
				<th name="userName" width="15%">用户名</th>
				<th name="realName" width="15%">真实姓</th>
				<th name="sex" width="10%">性别</th>
				<th name="birthday" width="15%">生日</th>
				<th name="" width="15%">操作</th>
			</tr>
		</table>
	</div>
	
	<div id="pageTagDiv"></div>
	
	
<div id="editDiv" style="z-index: 5; position: absolute; display: none; background: #FFFFFF; border: 1px solid #000000; height: 200px; width: 600px; text-align: center">
	<div>用户编辑
	</div>
	<div >
		<s:form id="editForm" validate="true" namespace="/demo/ajax" action="save">
			<input type="hidden" name="id">
			<table>
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="userName" id="opr_userName"/></td>
					<td>
						<span id="userNameSpanMsg" style="color: red"></span>
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" value="1" checked="checked" name="sex"> 男
						<input type="radio" value="0" name="sex"> 女
					</td>
					<td>
						<span id="sexSpanMsg" style="color: red"></span>
					</td>
				</tr>
				<tr>
					<td>生日：</td>
					<td><input type="text" name="birthday"/></td>
					<td>
						<span id="birthdaySpanMsg" style="color: red"></span>
					</td>
				</tr>
				<tr>
					<td>年龄：</td>
					<td><input type="text" name="age"/></td>
					<td>
						<span id="ageSpanMsg" style="color: red"></span>
					</td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td><input type="text" name="email"/></td>
					<td>
						<span id="emailSpanMsg" style="color: red"></span>
					</td>
				</tr>
				<tr>
					<td colspan="3">
						<input type="button" value="保存" onclick="saveOprBean()">
						<input type="button" value="关闭" onclick="showCustomDiv(false, 'editDiv', 1, true);">
					</td>
				</tr>
			</table>
		</s:form>
	</div>
</div>	
	
<div id="apdiv"
		style="z-index: 5; position: absolute; display: none; background: #FFFFFF; border: 1px solid #000000; height: 200px; width: 300px; text-align: center">
	<br /><br /><br /><br /><br /><br /><br />
	<div>正在执行，请稍等...</div>
</div>
</body>
</html>